<template>
	<view class="content">
		  <!-- #ifdef H5 -->
		<view  id="noticTop">
			<view class="nav-bar">
				<image src="@/static/img/common/back.png" mode="" @tap="backHandle" class="nav-bar-img"></image>
				<!-- 分享 -->
				<!-- <image src="@/static/img/courseBuy/scritotwo.png" mode="" @tap="scritoHandle"  class="nav-bar-img"></image> -->
			</view>
		</view>
		<!--  #endif -->
		<view class="paly-bar">
			<!-- courseType 0视频 1音频 2图文 不传就是全部 -->
			<view v-if="introduce.courseType == '0'">
				<cover-view >
					<video x5-video-player-type='h5-page' :src="firstCoursePath" class="video" initial-time="0" object-fit="cover" @pause="pause"
						@timeupdate="timeupdate" :autoplay="false" :controls="true" :poster="introduce.coverPath"></video>
				</cover-view>
				
			</view>
			<view v-else>
				<image :src="introduce.coverPath" mode="" class="video"></image>
			</view>
		</view>
		<view class="main">
			<view class="course-content">
				<view class="switch-tab">
					<!-- <u-gap height="30" bg-color="#f8f8f8"></u-gap> -->
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="tabChange" class="switch-tab-bar"
						active-color="#F4333C" inactive-color="#5E5E5E" font-size="30rpx" :bold="false"></u-tabs>
				</view>
				<view class="course-introduce">
					<view class="text-introduce">
						<text>{{introduce.seriesName || '--'}}</text>
						<text>{{introduce.categoryStr || '--'}}</text>
					</view>
					<view class="teacher-msg">
						<u-avatar :src="introduce.expertFace ? introduce.expertFace : '../../static/img/person/head.png'"
							size="68"></u-avatar>
						<text>{{introduce.expertName || '--'}}</text>
						<!-- <view class="attention">
							<image src="@/static/img/courseBuy/attention.png" mode="" class="attention-img"></image>
							<text>关注</text>
						</view> -->
					</view>
				</view>
				<view class="browse-history" v-if="status == 2 || status == 4">
					<view class="frequency-row">
						<image src="@/static/img/courseBuy/browse.png" mode="" class="img"></image>
						<text>{{introduce.courseWatchCount || 0}}次</text>
					</view>
					<view class="people-row">
						<image src="@/static/img/courseBuy/user.png" mode="" class="img"></image>
						<text>{{introduce.learnNum || 0}}人</text>
					</view>
					<view class="good-comments-row mr-100">
						<image src="@/static/img/courseBuy/scrito.png" mode="" class="img"></image>
						<text>{{introduce.goodsEvRate ?  Math.ceil(introduce.goodsEvRate*100) + '%' : '--'}}好评</text>
					</view>
					<!-- <view class="collect-row">
						<image src="@/static/img/courseBuy/collect.png" mode="" class="img"></image>
						<text>{{introduce.isConsult || 0}}收藏</text>
					</view> -->
				</view>
			</view>
			<view class="main-detail">
				<u-gap height="30" bg-color="#f5f5f5"></u-gap>
				<!-- 介绍 -->
				<view class="main-detail-introduce" v-if="current == 0">
					<view class="main-detail-introduce-list">
						<view class="u-content" v-if="introduce.courseDescribe">
							<u-parse :html="introduce.courseDescribe || '--'"></u-parse>
			
						</view>
						<view class="text" v-else>
							暂无介绍详情
						</view>
					</view>
				</view>
				<!-- 目录 -->
				<view class="course-detail" v-if="current == 1">
					<view class="courese-detail-row" v-for="(item,index) in directoryData" :key="item.id"
						@tap="palyVideo(item)">
						<view class="course-play">
							<text>{{index < 10 ? `0${index+1}` : index+1}}</text>
							<view class="play-detail">
								<text class="text">{{item.courseName || '--'}}</text>
								<view class="paly-time-row">
									<u-icon v-if="item.sourceType =='.mp4' && item.id != currentRow.id" name="play-right"
										size="30"></u-icon>
									<u-icon v-else-if="currentRow.sourceType =='.mp4' && item.id == currentRow.id"
										name="play-right-fill" color="#49AE9C" size="30"></u-icon>
									<u-icon v-else-if="item.sourceType =='.mp3' && item.id != currentRow.id" name="volume"
										size="30"></u-icon>
									<u-icon v-else-if="currentRow.sourceType =='.mp3' && item.id == currentRow.id"
										name="volume-up-fill" color="#49AE9C" size="30"></u-icon>
									<u-icon v-else name="photo" size="30"></u-icon>
									<text class="desc">{{item.fileName || '--'}}</text>
									<text v-if="item.sourceType =='.mp4' || item.sourceType =='.mp3'">{{item.courseDuration}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 评价 -->
				<view class="comments-course" v-else-if="current == 2">
					<view class="comprehensive-comments">
						<view class="comments-grade">
							<text>{{commentsAll.gradeAvg ? Number(commentsAll.gradeAvg).toFixed(1) : '--'}}</text>
							<view class="favorable-rate-row">
								<view class="favorable-rate">
									<text>好评{{commentsAll.goodsEvRate?(commentsAll.goodsEvRate * 100).toFixed(0): 0}}%</text>
								</view>
								<view class="favorable-rate-img">
									<u-rate :active-color="activeColor" :inactive-color="inactiveColor"
										inactive-icon="star-fill" :disabled="true" gutter="10"
										:current="commentsAll.gradeAvg || 0"></u-rate>
								</view>
							</view>
							<view class="comments-detail">
								<view>
									<text>· 全部 {{commentsAll.evTotalCount || '--'}}</text>
									<text>· 好评 {{commentsAll.goodsEvCount || '--'}}</text>
								</view>
								<view>
									<text>· 中评 {{commentsAll.midEvCount || '--'}}</text>
									<text>· 差评 {{commentsAll.badEvCount || '--'}}</text>
								</view>
							</view>
						</view>
						<!-- 评论列表 -->
						<view class="comments-row" v-for="(item,index) in commentsList" :key="index">
							<view class="comments-peo">
								<u-avatar :src="item.evaluaterFace || ''" size="68" class="header-img"></u-avatar>
								<view class="name-date">
									<text class="name">{{item.userName || '--'}}</text>
									<text
										class="date">{{item.userEvaluateTime ? item.userEvaluateTime.split(" ")[0] : '--'}}</text>
								</view>
								<view class="evaluation">
									<text>{{item.grade ? item.grade.toFixed(1) : '5'}}</text>
									<u-rate :active-color="activeColor" :inactive-color="inactiveColor"
										inactive-icon="star-fill" :disabled="true" gutter="10" :current="item.grade || 5">
									</u-rate>
								</view>
							</view>
							<view class="comments-text">
								<text v-html="item.userEvaluate  || '暂无评价'"></text>
							</view>
							<view class="comments-msg">
								<view class="comments-peo-img">
									<image src="@/static/img/courseBuy/comments.png" mode="" @tap="toApply(item)"
										class="img"></image>
									<text>{{item.childCount || 0 }}</text>
								</view>
								<view class="comments-peo-img">
									<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"
										></image>
									<!-- <image src="@/static/img/courseBuy/praise.png" mode="" class="img"
										v-show="item.isLike != 'unlike'"></image> -->
									<text>{{item.likes || 0 }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 推荐 -->
				<!-- <view class="recommended-course" v-else-if="current == 3">
					<view class="recommended-row" v-for="item in recommended" :key="item.id"
						:style="item.coverPath ? `background-image:url(${item.coverPath})` : 'background-image:url(https://seopic.699pic.com/photo/40016/4378.jpg_wh1200.jpg)'">
						<view class="teacher-information">
							<img :src="item.expertFace ? item.expertFace : '../../static/img/person/head.png'" alt="">
							<text>{{item.expertName}}</text>
						</view>
						<view class="title">{{item.seriesName}}</view>
						<view class="frequency">
							{{item.categoryStr}}·{{item.courseDuration}}分钟·{{item.learnNum ? item.learnNum : '0'}}人次练过
						</view>
					</view>
				</view> -->
			
			</view>
		</view>
		<!-- 全部回复 -->
		<u-popup mode="bottom" v-model="isShow" border-radius="30" height="800rpx">
			<view class="popup-content container">
				<scroll-view scroll-y="true">
					<view class="apply-title">
						{{ applyTotal || 0}} 条回复
					</view>
					<view class="comments-row">
						<view class="comments-peo">
							<u-avatar :src="curComment.evaluaterFace|| ''" size="68" class="header-img"></u-avatar>
							<view class="name-date">
								<text class="name">{{curComment.userName || '--'}}</text>
								<text
									class="date">{{curComment.userEvaluateTime ? curComment.userEvaluateTime.split(" ")[0] : '--'}}</text>
							</view>
							<view class="comments-peo-img">
								<image src="@/static/img/courseBuy/comments.png" mode="" @tap="toApply(item)"
									class="img"></image>
								<text>{{curComment.childCount}}</text>
							</view>
							<view class="comments-peo-img">
								<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
								<text>{{curComment.likes || 0}}</text>
							</view>
						</view>
						<view class="comments-text">
							<!-- <text>{{ curComment.userEvaluate || '--'}}</text> -->
							<text v-html=" curComment.userEvaluate || '--'"></text>
						</view>
						<view class="expert-apply" @tap="applyHandle(curComment)">
							回复
						</view>
						<view class="apply-all">
							<view class="comments-row" v-for="val in applyList" :key="val.id">
								<view class="comments-peo">
									<u-avatar :src="val.evaluaterFace || ''" size="68" class="header-img">
									</u-avatar>
									<view class="name-date">
										<text class="name"
											v-if="val.userId != expertId">{{val.userName || expertId}}</text>
										<text class="name" v-else>{{introduce.expertName}}</text>
										<text
											class="date">{{val.userEvaluateTime ? val.userEvaluateTime.split(" ")[0] : '--'}}</text>
									</view>
									<view class="comments-peo-img">
										<image src="@/static/img/courseBuy/comments.png" mode="" @tap="toApply(item)"
											class="img"></image>
										<text>{{val.childCount}}</text>
									</view>
									<view class="comments-peo-img">
										<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
										<text>{{val.likes || 0}}</text>
									</view>
								</view>
								<view class="comments-text">
									<view>回复
										<text class="apply-obj">{{ val.replyToName || '回复的对象'}}</text>
									</view>
									<text v-html="val.userEvaluate || '--'"></text>
								</view>
								<view class="expert-apply" @tap="applyHandle(val)" v-if="val.userId != expertId">
									回复
								</view>
							</view>
							<view class="all-reply-text" v-if="3 < 2">查看全部回复</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</u-popup>
		<!-- <view class="footer-kong"></view> -->
		<!-- 专家回复评论 -->
		<!-- <u-mask :show="isApply" @click="isApply = false"> -->
		<view class="comments-input container" v-show="isApply">
			<input v-model="applyText" :clearable="false" :placeholder="'回复' + ' ' + nickName" confirm-type="回复"
				class="inp-style" :placeholder-style="placeStyle">
			<text @tap="confirmApply" class="text">回复</text>
		</view>
		<!-- </u-mask> -->
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	let audio = null;
	export default {
		data() {
			return {
				isShow: false,
				expertId: this.$store.state.expertId,
				// 评分
				activeColor: '#faad39',
				inactiveColor: '#b2b2b2',
				current: 1,
				//默认为空
				firstCoursePath: null,
				//课程介绍数据
				courseId: null,
				introduce: {},
				//课程目录
				directoryData: null,
				curComment: [], // 当前评论集合
				// 回复的参数
				applyTotal: 0,
				applyList: [{}], // 回复的列表
				// 回复对象
				evaluateParams: {},
				isApply: false,
				nickName: '',
				// evaluateId:'',
				applyText: '',
				inpStyle: {
					"height": "60rpx",
					"padding": "0 30rpx",
					"borderRadius": "30rpx",
					"background": "#F3F3F3",
				},
				placeStyle: `
					"color": "#b9babc",
					"fontSize": "24rpx",
				`,
				//课程评论汇总
				commentsAll: {},
				//课程评论
				commentsList: null,
				status: null,
				currentRow: {},
			}
		},
		onLoad(options) {
			let {
				id,
				status
			} = options
			this.courseId = id;
			this.status = status;
			// this.getList();
			this.getCourseIntroduce(id); // 获取课程信息
			this.getCourseDirectory(id); // 目录
		},
		computed: {
			list: {
				get() {
					let temp = [];
					if (this.status == 2 || this.status == 4) {
						temp = [{
								name: '介绍',
							}, {
								name: '目录'
							},
							{
								name: '评价',
							}
						]
					} else {
						temp = [{
							name: '介绍'
						}, {
							name: '目录'
						}]
					}
					return temp
				}
			}
		},
		methods: {
			getList() {
				if (status == 2 || status == 4) {
					this.list = [{
							name: '介绍',
						}, {
							name: '目录'
						},
						{
							name: '评价',
						}
					]
				} else {
					this.list = [{
						name: '介绍'
					}, {
						name: '目录'
					}]
				}
			},
			//获取课程信息
			getCourseIntroduce(id) {
				console.log('id',id);
				// this.introduce = uni.getStorageSync('courseDetail')
			
				API.courseSeriesMsg(id).then(res => {
					if (res.code === 200) {
						this.introduce = res.result;
						this.firstCoursePath = res.result.firstCoursePath
							console.log('介绍详情',	this.introduce );
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('系列课程', res);
				})
			},
			//获取目录
			getCourseDirectory(id) {
				API.courseByCourseSeriesId(id).then(res => {
					if (res.code === 200) {
						res.result.forEach(item => {
							item.courseDuration = this.$options.filters['formatDuring'](item
								.courseDuration * 1)
						})
						this.directoryData = res.result;
						console.log('课程目录', res.result);
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			//获取评价
			getCourseComments(id) {
				// console.log(id);
				API.EvaluateCount(id).then(res => {
					if (res.code == 200) {
						this.commentsAll = res.result || [];
						this.isShowTab = false;
						console.log('xxxx', this.commentsAll);
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('课程总评论', res);
				})
				// id = '1581477637020098560';
				let pram = {
					courseSeriesId: id,
					page: 1,
					rows: this.$store.state.rows
				}
				API.EvaluateListByPage(pram).then(res => {
					if (res.code) {
						if (res.code == 200) {
							this.commentsList = res.result.records;
						}
					}
					console.log('评论列表', this.commentsList);
				})
			},
			//点击切换播放视频
			palyVideo(item) {
				if (item.sourceType == '.mp4') {
					// 视频
					// this.firstCoursePath = JSON.parse(item.sourcePath);
					this.firstCoursePath = item.sourcePath;
					console.log(item, this.firstCoursePath);
					// this.$forceUpdate();
				} else if (item.sourceType == '.mp3') {
					// 音频
					console.log('aaaa', item)
					if (audio) {
						if (this.currentRow.id == item.id) {
							audio.paused ? audio.play() : audio.pause();
						} else {
							audio.destroy();
							playaudio();
						}
					} else {
						playaudio();
					}

					function playaudio() {
						audio = uni.createInnerAudioContext();
						audio.autoplay = true;
						audio.src = item.sourcePath;
						audio.onPlay(() => {
							console.log('开始播放');
						});
						audio.onPause((pause) => {
							console.log(pause)
							console.log('当前播放时长：')
							console.log(audio.currentTime)
						})
						audio.onStop((stop) => {
							console.log(stop)
						})
						audio.onError((res) => {
							console.log(res.errMsg);
							console.log(res.errCode);
							// 10001	系统错误
							// 10002	网络错误
							// 10003	文件错误
							// 10004	格式错误
							// -1	未知错误
						});
					}
				} else {
					// 图文
					uni.downloadFile({
						url: item.sourcePath,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.openDocument({
									filePath: res.tempFilePath,
									fileType: item.sourceType.substr(1, item.sourceType
									.length), // 指定文件的格式
								})
							}
						}
					});
				}
				this.currentRow = item;
			},
			//视频播放停止请求后端记录播放时间
			pause(e) {
				console.log(e);
			},
			//视频播放时间
			timeupdate(e) {
				console.log(e.detail.currentTime);
			},
			// 点击评论弹出回复
			toApply(item) {
				this.curComment = item;
				this.applyList = item.child;
				this.applyTotal = item.childCount;
				this.isShow = true;
				console.log('applyList', this.curComment);
			},
			// 专家回复评论
			applyHandle(item) {
				this.nickName = item.userName
				console.log('回复评论', item.id, item.userName);
				this.evaluateParams = {
					courseSeriesId: this.courseId,
					evaluateType: 1,
					pid: item.id,
					userEvaluate: ''
				}
				this.isApply = true;

			},
			// 确认回复
			confirmApply() {
				let pram = {
					...this.evaluateParams,
					userEvaluate: this.applyText
				}
				console.log('确认回复参数', pram);
				API.c_SaveEvaluate(pram).then(res => {
					if (res.code === 200) {
						this.getCourseComments(this.courseId);
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					console.log('HUIFU ', res);
				})
				this.isShow = false;
				this.isApply = false;
			},
			//返回按钮
			backHandle() {
				uni.navigateBack();
			},
			// tab切换
			tabChange(index) {
				if (this.current != index) {
					this.current = index;
					switch (index) {
						case 0:
							if (Object.keys(this.introduce).length == 0) {
								this.getCourseIntroduce(this.courseId);
								console.log('切介绍', this.introduce);
							}
							break;
						case 1:
							if (Object.keys(this.directoryData).length == 0) {
								// let pram = {
								// 	page:1,
								// 	rows:this.$store.state.rows,
								// 	id:this.courseId
								// }
								this.getCourseDirectory(this.courseId);
								console.log('切目录', this.directoryData);
							}
							break;
						case 2:
							if (Object.keys(this.commentsAll).length == 0) {

								this.getCourseComments(this.courseId);
								console.log('切评论', this.commentsAll);
							}
							break;
						case 3:
							console.log('切推荐');
							break;
						default:
							break;
					}
				}
			},

			//分享按钮
			scritoHandle() {
				console.log('分享');
			},
		},
		filters: {
			formatDuring(millisecond) {
				let hours = parseInt((millisecond % (60 * 60 * 24)) / (60 * 60));
				let minutes = parseInt((millisecond % (60 * 60)) / 60);
				let seconds = parseInt(millisecond % 60);
				if (hours < 10 && hours > 0) {
					hours = '0' + hours;
				}
				if (minutes < 10 && minutes > 0) {
					minutes = '0' + minutes;
				}
				if (seconds < 10 && seconds > 0) {
					seconds = '0' + seconds;
				}
				if (hours > 0) {
					return hours + ":" + minutes + ":" + seconds;
				} else if (minutes >= 0) {
					return minutes + ":" + seconds;
				}
			}
		},
		destroyed() {
			if (audio) audio.destroy();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		// #ifdef H5
		.nav-bar {
			width: 100vw;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 29rpx 0rpx 35rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 500000;

			&-img:first-child {
				width: 18rpx;
				height: 32rpx;
			}
			//分享
			// &-img:last-child {
			// 	width: 35rpx;
			// 	height: 35rpx;
			// }
		}
		// #endif
		.paly-bar {
			width: 100vw;
			height: 515rpx;
			// position: fixed;
			// top: 0rpx;
			// left: 0rpx;
			// z-index: 5000;
				position: relative;
				z-index: -10;

			.video {
				width: 100%;
				height: 515rpx;
				background-color: #000;
			}
			/deep/uni-video{
				position: relative;
				z-index: -500000;
			}
		}
.main{
	flex: 1;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
}
		.course-content {
			width: 100%;
			height: auto;
			background: #fff;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			// overflow: hidden;
			// position: fixed;
			// z-index: 10000;
			// left: 0rpx;
			// top: 495rpx;

			.switch-tab {
				.switch-tab-bar {
					padding: 0rpx 146rpx;
					/deep/.uni-scroll-view {
						padding-top: 20rpx;
						padding-bottom: 20rpx;
					}
				}
			}

			.course-introduce {
				display: flex;
				justify-content: space-between;
				padding: 0rpx 29rpx;
				margin-top: 38rpx;
				margin-bottom: 51rpx;
				.text-introduce {
					width: 538rpx;

					>text {
						display: block;
					}

					>text:first-child {
						font-size: 32rpx;
						font-weight: bold;
						color: #2D2D2D;
					}

					>text:last-child {
						font-size: 26rpx;
						color: #939393;
						margin-top: 31rpx;
					}
				}
			}

			.teacher-msg {
				display: flex;
				flex-direction: column;
				align-items: center;

				>text:first-child {
					font-size: 20rpx;
					color: #1D1D1D;
					margin-top: 14rpx;
				}

				.attention {
					width: 80rpx;
					height: 28rpx;
					background: #FFF2F2;
					border-radius: 14rpx;
					margin-top: 14rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					&-img {
						width: 18rpx;
						height: 17rpx;
					}

					>text {
						font-size: 20rpx;
						color: #F4333C;
					}
				}
			}

			.browse-history {
				font-size: 24rpx;
				padding: 0rpx 47rpx 24rpx 29rpx;
				display: flex;
				// justify-content: start;
				justify-content: space-between;
				color: #C1C1C1;

				.frequency-row {
					display: flex;
					align-items: center;

					>.img {
						width: 26rpx;
						height: 20rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}

				.people-row {
					display: flex;
					align-items: center;

					>.img {
						width: 18rpx;
						height: 21rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}

				.good-comments-row {
					display: flex;
					align-items: center;

					>.img {
						width: 20rpx;
						height: 22rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}

				.collect-row {
					display: flex;
					align-items: center;

					>.img {
						width: 24rpx;
						height: 24rpx;
					}

					>text {
						margin-left: 8rpx;
					}
				}
			}
		}

		// 主体内容
		.main-detail {
			// height: calc(100% - 880rpx);
			flex: 1;
			overflow-y: scroll;
		}

		.main-detail-introduce {
			background: #fff;
			// height: calc(100% - 880rpx);
			height: 100%;

			.main-detail-introduce-list {
				padding: 30rpx 30rpx;
				height: 100%;
			}
		}

		.course-detail {
			padding: 0rpx 30rpx;
			background: #fff;

			.courese-detail-row {
				padding: 47rpx 0rpx 38rpx 0rpx;
				border-bottom: 1rpx solid #EEEEEE;

				.course-play {
					display: flex;

					>text {
						font-size: 28rpx;
						color: #333333;
					}

					.play-detail {
						flex: 1;
						margin-left: 22rpx;

						>.text {
							font-size: 28rpx;
							color: #333333;
						}

						.paly-time-row {
							width: 100%;
							display: flex;
							align-items: center;
							margin-top: 32rpx;

							>.img {
								width: 20rpx;
								height: 20rpx;
							}

							.desc {
								width: 300rpx;
								height: 50rpx;
								line-height: 50rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							>text {
								font-size: 20rpx;
								color: #AFAFAF;
							}

							>text:nth-of-type(1) {
								margin-left: 16rpx;
							}

							>text:nth-of-type(2) {
								margin-left: 31rpx;
							}
						}
					}
				}
			}
		}

		.comments-course {
			padding: 0rpx 30rpx 100rpx;
			// margin-top: 10rpx;
			background: #fff;
			height: 100%;
			overflow: scroll;


			.comprehensive-comments {
				.comments-grade {
					height: 208rpx;
					padding: 0rpx 40rpx;
					background: #F7F7F7;
					border-radius: 12rpx;
					margin-top: 29rpx;
					margin-bottom: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>text {
						font-size: 78rpx;
						font-weight: bold;
						color: #333333;
					}

					.favorable-rate-row {
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 16rpx;

						.favorable-rate {
							padding: 0rpx 8rpx 0rpx 12rpx;
							height: 38rpx;
							background-image: url(@/static/img/courseBuy/msgbg.png);
							background-size: cover;
							display: flex;
							justify-content: center;
							align-items: center;

							>text {
								font-size: 20rpx;
								color: #fff;
								margin-left: 8rpx;
							}
						}

						.favorable-rate-img {
							>img {
								width: 21rpx;
								height: 21rpx;
								margin-left: 4rpx;
							}
						}
					}

					.comments-detail {
						height: 100rpx;
						width: 250rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 20rpx;

						>view {
							display: flex;
							justify-content: space-between;
						}
					}
				}

				.comments-row {
					padding: 37rpx 0rpx 22rpx;
					border-bottom: 1rpx solid #EEEEEE;
					display: flex;
					flex-direction: column;

					.comments-peo {
						display: flex;

						.header-img {
							width: 72rpx;
							height: 72rpx;
						}

						.name-date {
							margin-left: 19rpx;
							height: 72rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							>text {
								display: block;
							}

							.name {
								font-size: 28rpx;
								color: #333333;
							}

							.date {
								font-size: 20rpx;
								color: #868686;
							}
						}

						.evaluation {
							display: flex;
							align-items: center;
							margin-left: auto;

							>text {
								margin-right: 8rpx;
								font-size: 20rpx;
								color: #333333;
							}

							>img {
								width: 21rpx;
								height: 21rpx;
								margin-left: 4rpx;
							}

						}
					}

					.comments-img {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: auto;
						padding: 20rpx 0;
						margin-bottom: 20rpx;

						.img {
							margin-right: 20rpx;
							width: 100%;
							height: 260rpx;

							&:last-child {
								margin-right: 0;
							}

						}
					}

					.comments-msg {
						display: flex;
						margin-left: auto;
						margin-top: 30rpx;

						.comments-peo-img {
							display: flex;
							align-items: center;
							margin-right: 20rpx;

							>.img {
								width: 20rpx;
								height: 20rpx;
							}

							>text {
								font-size: 20rpx;
								color: #9D9D9D;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}

		.recommended-course {
			padding: 0rpx 30rpx 30rpx;
			margin-top: 10rpx;
			background: #fff;
			overflow: hidden;

			.recommended-row {
				margin-top: 30rpx;
				height: 268rpx;
				border-radius: 12rpx;
				background-color: #AFAFAF;
				padding: 24rpx;
				overflow: hidden;

				.teacher-information {
					display: flex;
					align-items: center;

					>img {
						width: 40rpx;
						height: 40rpx;
						border-radius: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #fff;
						margin-left: 12rpx;
					}
				}

				>view {
					color: #fff;
				}

				.title {
					margin-top: 110rpx;
					font-size: 28rpx;
				}

				.frequency {
					margin-top: 10rpx;
					font-size: 20rpx;
				}
			}
		}

		// .header-kong {
		// 	width: 100vw;
		// 	height: 832rpx;
		// }

		// .footer-kong {
		// 	width: 100vw;
		// 	height: 120rpx;
		// }
	}

	// 全部评论弹出层
	// 回复样式
	// 回复样式
	.popup-content {
		height: inherit;
			/deep/.uni-scroll-view {
				padding-bottom: 50rpx;
			}
		.apply-title {
			padding: 30rpx 0;
		}

		.comments-row {
			border: none;

			.comments-peo-img {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				>.img {
					width: 20rpx;
					height: 20rpx;
				}

				>text {
					font-size: 20rpx;
					color: #9D9D9D;
					margin-left: 6rpx;
				}
			}

			.applyAll {
				margin-top: 30rpx;
				padding: 0 30rpx 30rpx;
				background-color: #f6f3f7;

				.all-reply-text {
					width: 100%;
					margin: 30rpx 0;
					font-size: 24rpx;
					color: #5183d7;
					text-align: right;
				}
			}
		}
	}

	// /deep/.uni-scroll-view {
	// 	padding-top: 20rpx;
	// 	padding-bottom: 20rpx;
	// }

	// 评论样式-共用
	.comments-row {
		padding: 37rpx 0rpx 22rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		flex-direction: column;

		&:last-child {
			border: none;
		}

		.comments-peo {
			display: flex;

			.header-img {
				width: 72rpx;
				height: 72rpx;
			}

			.name-date {
				margin-left: 19rpx;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				>text {
					display: block;
				}

				.name {
					font-size: 28rpx;
					color: #333333;
				}

				.date {
					font-size: 20rpx;
					color: #979497;
				}
			}

			.evaluation {
				display: flex;
				align-items: center;
				margin-left: auto;

				>text {
					margin-right: 8rpx;
					font-size: 20rpx;
					color: #333333;
				}

				>img {
					width: 21rpx;
					height: 21rpx;
					margin-left: 4rpx;
				}

			}
		}

		.comments-text {
			font-size: 26rpx;
			color: #333333;
			margin-top: 36rpx;
			line-height: 40rpx;

			.apply-obj {
				color: #c2c2c2;
				padding: 0 20rpx;
			}
		}

		.expert-apply {
			text-align: right;
			color: #5183d7;
		}

		.comments-msg {
			display: flex;
			margin-left: auto;
			margin-top: 30rpx;

			.msg,
			.comments-peo-img {
				display: flex;
				align-items: center;

				>.img {
					width: 20rpx;
					height: 20rpx;
				}

				>text {
					font-size: 20rpx;
					color: #9D9D9D;
					margin-left: 6rpx;
				}
			}

			.comments-peo-img {
				margin-left: 20rpx;
			}
		}
	}

	.comments-input {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		z-index: 50000;

		.inp-style {
			// color: #b9babc;
			font-size: 24rpx;
			width: 100%;
			height: 60rpx;
			padding: 0 30rpx;
			border-radius: 30rpx;
			background: #F3F3F3;

		}

		.text {
			width: 150rpx;
			text-align: center;
		}
	}
</style>
